<script setup lang="ts">
import { ref } from 'vue'

const exportPacsRef = ref()
const exportURef = ref()
const encryptRef = ref(true)
const controlsRef = ref({
  hasUConnect: false,
  hasPacsConnect: false,

  uDevicesList: [],
  pacsList: [],

  isExporting: true,
  exportFinished: 10,
  exportTotal: 100
})

</script>

<template>
  <el-dialog
    title="选择导出位置"
    destroy-on-close
    align-center
    width="900"
  >
    <template #default>
      <el-card>
        <p>选择导出pacs服务器</p>
        <div  v-show="controlsRef.hasPacsConnect">
          <el-radio-group v-model="exportPacsRef">
            <el-radio value="''">无</el-radio>
          </el-radio-group>
        </div>
        <div v-show="!(controlsRef.hasPacsConnect)" class="font-bold text-xl text-center">
            暂无已连接的PACS服务
        </div>
      </el-card>

      <el-card class="mt-[20px]">
        <p>选择导到外界存储器</p>
        <div v-show="controlsRef.hasUConnect">
          <el-radio-group v-model="exportURef">
            <el-radio value="''">无</el-radio>
            <el-radio :value="3">Option A</el-radio>
            <el-radio :value="6">Option B</el-radio>
            <el-radio :value="9">Option C</el-radio>
          </el-radio-group>
        </div>
        <div v-show="!(controlsRef.hasUConnect)" class="font-bold text-xl text-center">
          暂无已连接的外界存储器
        </div>
      </el-card>

      <div class="mt-[20px]">
        <el-checkbox style="margin-left: 20px" v-model="encryptRef" border>加密导出</el-checkbox>
      </div>

      <div class="flex items-center mt-[20px]" v-show="controlsRef.isExporting">
        <p>导出进度：</p>
        <div class="flex-1">
          <el-progress :percentage="50" />
        </div>
      </div>

    </template>
    <template #footer>
      <el-button :disabled="controlsRef.isExporting">取消</el-button>
      <el-button :disabled="controlsRef.isExporting">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
